<template>
  <div>
    <a-card>
      <div class="flex flex-a-c  alarm-title">
        <span v-if="model.color" :style="{ color: model.color }">
          <a-icon :style="{ color: model.color, 'margin-right': ' 2px' }" theme="filled" type="check-circle" />
          {{ runStateOptionCase(model.runstate, 'label') }}
        </span>
        <span class="colorin">{{ model.groupname }}</span>
        <a-button :disabled="hasAuth('registerBtn')" type="primary" @click="() => registration(true)" @func="getData">
          注册续期
        </a-button>
      </div>
      <a-row :gutter="24">
        <a-col :xl="12" :xxl="12">
          <div style="" class="infoimg">
            <img :src="model.picture ? imgUrl + model.picture : defultimg" alt="" :onerror="onerrorimg" />
          </div>
        </a-col>
        <a-col :xl="12" :xxl="12">
          <div class="infoAlarmbox">
            <h4 class="colorin">当前报警</h4>
            <div v-if="model.runstate == 2000">
              <a-table
                :columns="columns"
                :data-source="alarmData"
                size="small"
                :scroll="{ y: 300 }"
                :pagination="false"
              ></a-table>
            </div>

            <a-empty v-else style="margin-top: 80px" />
          </div>
        </a-col>
      </a-row>
      <register :openDialog.sync="modal1Visible" :params="params"></register>
    </a-card>
  </div>
</template>

<script>
import api from '@api/deviceInfo';
import register from './register';
import API from '@api/userConfig';
import { runStateOptionCase, columns } from './config';
import { createNamespacedHelpers } from 'vuex';

const { mapState } = createNamespacedHelpers('menu/');

export default {
  name: 'WorkShopAlarm',
  data() {
    return {
      model: {},
      modal1Visible: false,
      params: {},
      form: { type: undefined, forever: 0 },
      defultimg: require('@images/defaultImg.png'),
      onerrorimg: 'this.src="' + require('@images/defaultImg.png') + '"',
      columns,
      alarmData: [],
    };
  },
  components: { register },
  computed: {
    ...mapState(['authBtnlists']),
    macSN() {
      return this.$route.query.macsn;
    },
    imgUrl() {
      return this.$pictureUrl;
    },
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'));
    },
  },
  mounted() {
    this.getSelectArchives();
    this.getSelMacAlarm();
  },
  methods: {
    runStateOptionCase,
    hasAuth(str) {
      return !this.authBtnlists.includes(str);
    },
    // 获取设备数据
    async getSelectArchives() {
      const { Data: res } = await api.selectArchives({ macSN: this.macSN });
      this.model = res;
      this.model.color = this.runStateOptionCase(res.runstate, 'color');
      this.$forceUpdate();
    },
    // 获取报警数据
    async getSelMacAlarm() {
      let params = { page: 1, macsn: this.macSN, select: '1,2,3,4' };
      const { Data: res } = await api.SelMacAlarm(params);
      this.alarmData = res;
    },
    // 注册续期按钮事件
    getData(val) {
      this.modal1Visible = val;
    },
    //注册续期按钮点击打开表单
    async registration(modal1Visible) {
      const res = await API.getUserResource({ username: this.userInfo.username });
      const typeArr = [];
      function getType(data, arr) {
        data.forEach((item) => {
          typeArr.push(item.type);
          if (item.children.length > 0) {
            getType(item.children, arr);
          }
        });
      }
      getType(res.Data[0].children, typeArr);
      let that = this;
      if (typeArr.includes(4) === false) {
        that.$message.info('权限过期');
      } else {
        this.modal1Visible = modal1Visible;
        // this.timeParams.day = '0-0-0';
      }
      this.params = {
        psnCode: this.macSN,
        // dieForeverFlag: this.form.forever,
        level: 2,
        id: this.userInfo.compid,
        companyId: this.userInfo.compid,
        registedBy: this.userInfo.username,
        register: this.userInfo.name,
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import '~@assets/styles/varibless.less';

.alarm-title {
  padding-bottom: 24px;
  span {
    margin-right: 20px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: @lightlingtColor;
    line-height: 29px;
  }
}
.infoimg {
  width: 377px;
  height: 304px;
  float: left;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
